<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="author" content="Dzenan Ridjanovic"/>
    <title>MagicBoxes</title>   
    <link rel="stylesheet" href="css/layout.css"/>
    <link rel="stylesheet" href="css/link.css"/>
    <link rel="stylesheet" href="css/list.css"/>
    <link rel="stylesheet" href="css/menu.css"/>
    <link rel="stylesheet" href="css/page.css"/>
  </head>
  
  <body>
    <header>
      <h2>Magic Boxes in Dart: Inheritance, Reflexive and Twin Lines</h2>
      <!-- http://dev.opera.com/articles/view/html-5-canvas-the-basics/ -->
    </header>
    
    <nav>
     <ul>
       <li>File
         <ul>
           <li><button id="save-as-png">As .png</button></li>
         </ul>  
       </li>
       <li>Edit
         <ul>
           <li><button id="delete-selection">Delete</button></li>
         </ul>
       </li>
       <li>Select
         <ul>
           <li><button id="select-all">All</button></li>
           <li><button id="select-boxes">Boxes</button></li>
           <li><button id="select-lines">Lines</button></li>
           <li><button id="select-box-lines">Box lines</button></li>
           <li><button id="select-lines-between-boxes">Between boxes</button></li>
         </ul>
       </li>
       <li>View
         <ul>
           <li><button id="increase-selection-height">+ Height</button></li>
           <li><button id="decrease-selection-height">- Height</button></li>
           <li><button id="increase-selection-width">+ Width</button></li>
           <li><button id="decrease-selection-width">-Width</button></li>
           <li><button id="increase-selection-size">+ Size</button></li>
           <li><button id="decrease-selection-size">- Size</button></li>
           <li><button id="hide-selection">Hide</button></li>
           <li><button id="show-hidden-selection">Show</button></li>
         </ul>
       </li>
       <li>Create
         <ul>
           <li><button id="create-boxes-in-diagonal">Diagonal</button></li>
           <li><button id="create-boxes-as-tiles">Tiles</button></li>
         </ul>
       </li>
       <li>About 
         <ul>
           <li>Magic Boxes in <a href="http://www.dart.org/">Dart</a></li>
           <li>Spiral 10</li>
           <li>2012-01-04</li>
           <li>Dzenan Ridjanovic</li>
           <li><img src="img/ondart0.png"/></li>
         </ul>   
       </li>
     </ul>
    </nav>
    
    <section> 
      <div id="scrollpane">
        <canvas id="canvas" width="990" height="580">
          Canvas is not supported in your browser.
        </canvas>  
      </div>  
      <footer> 
        <button id="select"><img src="img/select.png"/></button>
        <button id="line"><img src="img/line.png"/></button>
        <button id="box"><img src="img/box.png"/></button>
        <label>Board</label>
        <label for="canvasWidth">width</label>
        <input type="number" id="canvasWidth" min="990"/>
        <label for="canvasHeight">height</label>
        <input type="number" id="canvasHeight" min="580"/>
        <br/>
        <label for="boxName">Box</label>
        <input type="text" id="boxName"/>
        <label for="itemName">Item</label>
        <input type="text" id="itemName"/>
        <select id="itemCategory">
          <option>attribute</option>
          <option>guid</option>
          <option>identifier</option>
          <option>required</option>
        </select> 
        <label for="itemSequence">seq</label>
        <input type="number" id="itemSequence" min="1" size="1" />
        <button id="addItem">Add</button>
        <button id="getItem">Get</button>
        <button id="setItem">Set</button>
        <button id="removeItem">Remove</button>     
        <br/>    
        <label>Line</label>
        <select id="lineCategory">
          <option>relationship</option>
          <option>inheritance</option>
          <option>reflexive</option>
          <option>twin</option>
        </select>
        <button id="getLine">Get</button>
        <button id="setLine">Set</button>
        <br/>   
        <label id="line12Box1">Box1</label> ->
        <label id="line12Box2">Box2</label>
        <input type="text" id="line12Min" size="1"/> ..
        <input type="text" id="line12Max" size="1"/>
        <label for="line12Id">identifier</label>
        <input type="checkbox" id="line12Id"/>
        <label for="line12Name">name</label>
        <input type="text" id="line12Name"/> 
        <br/>
        <label id="line21Box2">Box2</label> ->
        <label id="line21Box1">Box1</label>
        <input type="text" id="line21Min" size="1"/> ..
        <input type="text" id="line21Max" size="1"/>
        <label for="line21Id">identifier</label>
        <input type="checkbox" id="line21Id"/>
        <label for="line21Name">name</label>
        <input type="text" id="line21Name"/>    
      </footer>
      <script type="text/javascript" src="MagicBoxes.dart.app.js"></script>
    </section>
    
    <section>
      <header>
        <h3>Overview</h3>
      </header>
      <p>
        The Magic Boxes tool is developed in <a href="http://www.dartlang.org/">Dart</a> to start learning Dart 
        (after reading the Getting Started section, developing the first 
        <a  href="https://plus.google.com/u/0/112767453954051794400/posts/igDQd1ubWQs">example</a>, 
        and the <a href="https://github.com/dzenanr/pingpong">Ping Pong</a> game). 
        The tool is based on <a href="http://code.google.com/p/magic-boxes/">Magic Boxes</a> and 
        <a href="http://www.modelibra.org/">Modelibra Modeler</a>,
        both developed in Java.
      </p>
      <p>
        The <a href="https://github.com/dzenanr/MagicBoxes">code</a> of Magic Boxes in Dart is kept at 
        <a href="https://github.com/">GitHub</a>. 
        If you are new to <a href="http://sixrevisions.com/resources/git-tutorials-beginners/">Git</a>, 
        you should really <a href="http://www.ralfebert.de/blog/tools/git_screencast/">start</a> learning it. 
        However, if you are impatient to start learning Dart, you may want to 
        <a href="https://github.com/dzenanr/MagicBoxes/tags">download</a> the spirals.
      </p> 
    </section>
     
    <section>
      <header>
        <h3>Creating, Moving, Selecting and Editing Boxes and Lines</h3>
      </header>
      <p>
        With spiral 10, you can start designing a model such as the meta model in the following diagram. 
        <a href="#"><img src="img/metamodel.png"/></a>
      </p>
      <p>
        However, you cannot still save a model in a file. 
      </p>
      <p>
        Click the box tool to create a box (a concept in your domain), by clicking on an empty space in the board.
      </p>
      <p>
        To move a non selected box, click the box and keep the mouse down while moving it. 
        The connected lines will follow.
        A selected box cannot be moved.
      </p>
      <p>
        Click the box to select it. Click again to deselect it. 
        If there are several selected boxes (and/or lines), you may deselect them all by clicking on an empty space in the board.
        For the last selected box, its title (name) may be changed by entering text in the Box field of the tool bar. 
        For the last selected box, an item may be added by entering its name in the Item box, then clicking on the Add button.
        The item is an attribute of the box (concept). In addition, it may be declared as guid (globally unique identifier--not significant to a user), 
        identifier (significant to a user) or required (mandatory value). The choice is presented in the pop-up list.
        An existing item may be obtained by entering its name and clicking on the Get button. 
        The obtained item may be changed (Set button), including its sequence position within the box,  
        or even removed (Remove button). The size of selected boxes may be changed by menu items in the View menu. 
      </p>
      <p>
        If you want to create several boxes, double-click the box tool to stay on. 
        To return to the select mode double-click the select tool.
      </p>
      <p>
        Click the line tool to create a line between the last two clicked boxes, 
        by clicking on an empty space in the board. 
        The first box is a parent and the second box is a child. By default, the parent box has 0..N cardinalities. 
        The min is 0 and the max is N. By default, the child box has 1..1 cardinalities. 
        An example is Department--0..N----1..1--Employee. 
        A department has from 0 to N employees and an employee works for exactly one department.
        The line is a relationship between two boxes (concepts). It has two directions: from parent to child (neighbor) and from child to parent (neighbor).
        The last selected line may be obtained by clicking on the Get button in the tool bar.
        The obtained line may be transformed to inheritance line (child inherits from parent), 
        to reflexive line (one-parent box, not two boxes) or to twin line (two lines between the same two boxes must be first created). 
        The choice is presented in the pop-up list.
        The line cardinalities may be changed. For the 1..1 cardinalities, the identifier (id) may be checked on.
        The line changes may be set by clicking on the Set button.
      </p>
      <p>
        Click the line, or very close to it, to select it. Click again to deselect it. 
        A reflexive line is selected by clicking on a horizontal portion of the line.
        If two lines are created between the same two boxes, the last line may be selected by clicking on both lines. 
        The selected line should be displayed in the tool bar by clicking on the Get button. 
        Then, the twin choice will separate the two lines into twins. 
        If there are several selected lines (and/or boxes), you may deselect them all by clicking on an empty space in the board.
      </p>
      <p>
        If you want to create several lines, double-click the line tool to stay on. 
        To return to the select mode double-click the select tool.
      </p>
    </section> 
    
    <section>
      <header>
        <h3>Your Model</h3>
      </header>
      <p>
        In the File menu, save your model as a .png image:
      </p>
      <img alt="Your model saved as .png." id="modelImage"/>
      <p>
        You may save the model image as the model.png file in the MagicBoxes/img directory.
      </p>
    </section>
    
    <section>
      <header>
        <h3>Spirals</h3>
      </header>
      <p> 
        The spiral approach to software learning and development, which preserves a project history as a series of code snapshots or spirals, 
        is used in this project. 
      </p>
      <p> 
        Learning new software concepts and technologies is a challenging task. Learning in spirals, 
        from simple to more advanced concepts but with concrete software applications, helps students get a reasonable confidence level early on, 
        and motivates them to learn by providing more useful applications. With each new spiral, the project grows and new concepts are introduced.  
        A new spiral is explained with respect to the previous one.  The difference between two consecutive spirals is that the next spiral has the new code introduced 
        and the old code modified or deleted.  This is called learning by anchoring to what we already understand.  With a new spiral, 
        we can come back to what we did previously and improve it.  In this way, learning in spirals can touch the same topic several times, 
        but each time with more details in a better version.
      </p>
      <p> 
        There are many books where students have to learn quite a lot before applying new concepts, and even then, it is not obvious how to develop a complete software application. 
        It took me more than ten years of learning and teaching to find out that the initial learning of a new technology must be task driven and not topic (subject) driven.  
        Most software books are topic driven.  It takes a quick look at the Table of Contents of almost any software book to realize that each chapter introduces a major topic. 
        In a spiral, there may be more than one topic and all of them relate to what we want to accomplish with the spiral.
      </p>
      <ul class="link">
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s00/MagicBoxes.html">Spiral 00: Hello World</a>
        </li>
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s01/MagicBoxes.html">Spiral 01: Two Boxes</a>
        </li>
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s02/MagicBoxes.html">Spiral 02: Moving Monsters</a>
        </li>
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s03/MagicBoxes.html">Spiral 03: 
          Creating Boxes and Moving Selected Boxes</a>
        </li>
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s04/MagicBoxes.html">Spiral 04: 
          Boxes, with Text, Move Properly</a>
        </li>
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s05/MagicBoxes.html">Spiral 05: Boxes with Tool Bar</a>
        </li>
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s06/MagicBoxes.html">Spiral 06: Boxes with Lines</a>
        </li>
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s07/MagicBoxes.html">Spiral 07: 
          Line Selection and Horizontal Menu Bar with Menus and Menu Items </a>
        </li>
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s08/MagicBoxes.html">Spiral 08: 
          Boxes with User Entered Names and Items</a>
        </li>
        <li>
          <a href="http://dl.dropbox.com/u/161496/dart/tool/MagicBoxes/spirals/s09/MagicBoxes.html">Spiral 09: 
          lines with User Entered Cardinalities, Ids and Names</a>
        </li>
      </ul>
    </section>
  </body>
</html>
